<template>
  <div class="shop">
    <loading :show="loading" />
    <ul class="upload">
      <li @click="$router.push('/service/upload-main')">店资料修改</li>
      <li @click="$router.push('/service/upload-product')">产品介绍修改</li>
    </ul>
    <div class="image" v-if="url">
      <img :src="url" />
      <div>请扫码支付</div>
    </div>
    <div class="refresh" @click="reload">刷新收银信息</div>
    <div class="list">
      <div class="item" v-for="(item, index) in list" :key="index">
        <div class="image">
          扫码支付
        </div>
        <div class="desc">
          <div class="text">操作时间: {{item.update_time}}</div>
          <div class="text">订单号: {{item.sn}}</div>
          <div class="text">支付ID: {{item.user_id}}</div>
          <div class="text">金额: {{item.total_pay}}</div>
          <div class="text color">状态: {{ +item.status === 0 ? '待支付' : '已完成' }}</div>
        </div>
      </div>
    </div>
    <pull-up
      :loading="loading"
      :busy="queryList.busy"
      :data-len="list.length"
      @loadMore="loadMore" />
  </div>
</template>

<script>
import Loading from '@/components/Loading'
import api from '@/api'
import base64 from '@/util/base64'
import PullUp from '@/components/PullUp'
export default {
  name: 'Shop',
  components: {
    Loading,
    PullUp
  },
  data() {
    return {
      loading: false,
      list: [],
      queryList: {},
      url: ''
    }
  },
  methods: {
    loadMore() {
      setTimeout(() => {
        this.getList(true)
      }, 200)
    },
    init() {
      this.queryList = {
        page: 0,
        pageSize: 10,
        busy: false
      }
      this.list = []
    },
    getList(append = false) {
      if (this.queryList.busy === false) {
        this.queryList.page++
        this.loading = true
        this.queryList.busy = true
        api.User.merchantList({
          ...this.queryList
        }).then(response => {
          let { data } = response
          data = base64.parse(data)
          if (data.list.length === 0) {
            this.queryList.busy = true
          } else {
            this.queryList.busy = false
            if (append) {
              this.list = this.list.concat(data.list)
            } else {
              this.list = data.list
            }
          }
          // console.log(this.list)
        }).finally(() => {
          this.loading = false
        })
      }
    },
    fetch() {
      api.User.isMerchant().then(response => {
        let { data } = response
        data = base64.parse(data)
        this.url = data.url
        // console.log(data)
      })
    },
    reload() {
      this.init()
      this.getList()
    }
  },
  created () {
    // console.log(2222)
    this.fetch()
    this.init()
    this.getList()
  },
  activated() {
    // console.log(111)
    // this.init()
    // this.getList()
    // this.fetch()
  }
}
</script>

<style scoped lang="stylus">
.shop
  padding 10px
  .image
    padding 20px
    background white
    display flex
    flex-direction column
    div
      height 30px
      line-height 30px
  .refresh, .upload
    height 30px
    line-height 30px
    background white
    margin-top 10px
    border-radius 5px
    letter-spacing 2px
    color red
  .upload
    margin-bottom 10px
    margin-top -10px
    display flex
    padding 2px 10px
    justify-content space-around
    li
      display inline-block
      padding 0 10px
      background $main_color
      color white
  .list
    margin-top 10px
    //padding 20px
    //background white
    .item
      display flex
      background white
      padding 10px
      border-radius 5px
      margin-bottom 10px
      .image
        width 90px
        padding 10px
        display flex
        justify-content center
        align-items center
        color red
        font-weight 700
      .desc
        flex 1
        display flex
        flex-direction column
        justify-content space-around
        align-items start
        .text
          color #333
          line-height 20px
          &.color
            color red
</style>
